<template>
	<view class="pageView">
		<u-navbar
			title="申请发票"
			:autoBack="true"
			leftIconColor="#333"
		>
		</u-navbar>
		<view class="pageTop">
			<view class="pageTopItem">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/fa.png"></image>
				<view>发票抬头</view>
			</view>
			<view class="pageTopItem" @click="handleHistoryList">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/fa1.png"></image>
				<view>发票历史</view>
			</view>
		</view>
		<scroll-view style="height: 67vh;padding: 0px 32rpx;">
			<view class="listItem" v-for="(item, index) in list" :key="index">
				<view class="listItemTitle">
					<view class="listItemTitle-title">{{ item.title }}</view>
					<view class="listItemTitle-date">{{ item.date }}</view>
				</view>
				<u-divider style="margin: 16rpx 0px;"></u-divider>
				<view class="listItemContent" style="margin-top: 8rpx;">
					<view class="listItemContent-key">就诊医院</view>
					<view class="listItemContent-val">{{ item.name }}</view>
				</view>
				<view class="listItemContent" style="margin-top: 24rpx;">
					<view class="listItemContent-key">手机号</view>
					<view class="listItemContent-val">{{ item.phone }}</view>
				</view>
				<view class="listItemContent" style="margin-top: 24rpx;">
					<view class="listItemContent-key">就诊人</view>
					<view class="listItemContent-val">{{ item.username }}</view>
				</view>
				<view class="listItemContent" style="margin-top: 24rpx;">
					<view class="listItemContent-key">期望陪诊时间</view>
					<view class="listItemContent-val">{{ item.dateL }}</view>
				</view>
				<u-divider style="margin: 16rpx 0px;"></u-divider>
				<view class="listItembottom">
					<u-checkbox-group v-model="checked" shape="circle">
						<u-checkbox></u-checkbox>
					</u-checkbox-group>
					<view>{{ item.price }}</view>
				</view>
			</view>
		</scroll-view>
		<view class="pageBottom">
			<view class="pageBottom-block">
				<u-checkbox-group v-model="checked" shape="circle">
					<view class="pageBottomCheck">
						<u-checkbox></u-checkbox>
						<view class="pageBottomCheck-all">全选</view>
						<view class="pageBottomCheck-content">已选<text>{{ num }}</text>笔订单 共</view>
						<view class="pageBottomCheck-price">¥129.00</view>
					</view>
				</u-checkbox-group>
				<button class="pageBottomBtn" @click="handleAddInvoice">开票申请</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				list: [
					{
						title: '2小时陪诊',
						date: '2024-09-04 07:16:50',
						name: '北京顺义医院',
						phone: '18807141161',
						username: '周莱来',
						dateL: '2024-09-02',
						price: '¥129.00'
					}
				],
				num: 0
			}
		},
		methods: {
			handleAddInvoice() {
				uni.navigateTo({
					url: '/pages/addInvoice/addInvoice'
				})
			},
			handleHistoryList() {
				uni.navigateTo({
					url: '/pages/historyList/historyList'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.pageView{
		height: 100vh;
		background: #f4f4f4;
		.pageTop{
			margin-top: 174rpx;
			background: #fff;
			padding: 32rpx 0px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.pageTopItem{
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 60rpx;
					height: 60rpx;
				}
				view{
					padding-top: 16rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: rgba(0,0,0,0.9);
				}
			}
		}
		.listItem{
			margin-top: 24rpx;
			width: 622rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 32rpx;
			.listItemTitle{
				display: flex;
				justify-content: space-between;
				align-items: center;
				&-title{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #333333;
				}
				&-date{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.listItemContent{
				display: flex;
				justify-content: space-between;
				align-items: center;
				&-key{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 24rpx;
					color: #333333;
				}
				&-val{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.listItembottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
	.pageBottom{
		padding: 32rpx;
		&-block{
			background: #fff;
			display: flex;
			align-items: center;
			padding: 18rpx 22rpx;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.pageBottomCheck{
				display: flex;
				align-items: center;
				&-all{
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 30rpx;
					color: #999999;
					padding-left: 4rpx;
				}
				&-content{
					padding-left: 16rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					text{
						color: #333333;
					}
				}
				&-price{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #DD504A;
				}
			}
			.pageBottomBtn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 162rpx;
				height: 68rpx;
				background: #0165FB;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}
</style>